<template>
    <div>
        <Card>
            <Row class="form-row">
                <Form :model="filters" ref="form1" label-position="right" :label-width="90" inline>
                    <FormItem label="小区名称" prop="name">
                        <div class="filters-input">
                            <el-select v-model="filters.housingId" filterable default-first-option
                                       placeholder="请选择小区" :clearable="true"
                                       no-data-text="暂无数据">
                                <el-option label="全部" :value="0">
                                </el-option>
                                <el-option v-for="item in houseList" :key="item.id" :label="item.name" :value="item.id">
                                </el-option>
                            </el-select>
                        </div>
                    </FormItem>
                    <FormItem>
                        <Button type="primary" icon="ios-search" @click="handleQuery('form1')">
                            搜索
                        </Button>
                    </FormItem>
                </Form>

            </Row>
            <el-table stripe border :loading="tableLoading" :data="tableData" ref="table" style="width: 100%">
                <template slot="empty">暂无数据</template>
                <el-table-column prop="name" label="小区名称"></el-table-column>
                <el-table-column prop="owners" label="业主人数"></el-table-column>
                <el-table-column prop="members" label="家属人数"></el-table-column>
                <el-table-column prop="tenants" label="租客人数"></el-table-column>
                <el-table-column prop="all" label="总人数"></el-table-column>
            </el-table>

            <Page style="margin: 10px 0;" :total="pageTotal" :current="pageNum" :page-size="pageSize" show-total
                  show-sizer show-elevator @on-change="handlePage" @on-page-size-change='handlePageSize'>
            </Page>
        </Card>

    </div>
</template>
<script>
    export default {
        data() {
            return {
                houseList:[],
                //查询条件
                filters: {
                    housingId: 0,
                },
                //页码
                pageNum: 1,
                //每页数量
                pageSize: 10,
                //总数
                pageTotal: 0,
                //表格数据
                tableData: [],
                //数据表格隐藏那个状态
                tableLoading: false,
            };
        },
        created: function () {
            this.gethouse();
            this.loadData();
        },
        methods: {
            //加载小区
            gethouse() {
                let url = "/api/housing/getHousingByLogin";
                this.postRequest(url).then(res => {
                    this.houseList = res;
                });
            },
            //加载数据
            loadData() {
                const param = {
                    housingId: this.filters.housingId,
                    pageNum: this.pageNum,
                    pageSize: this.pageSize
                };
                //与后台交换数据
                this.postRequest("/api/adminIndex/household",param).then(res => {
                    this.tableLoading = false;
                    if (res.code == 20000) {
                        this.tableData = res.data.list;
                        this.pageTotal = res.data.total;
                    } else {
                        this.tableData = [];
                        this.$Message.error({
                            content: res.message,
                            duration: 5
                        });
                    }
                });
            },
            //查询
            handleQuery(name) {
                this.loadData();
            },

            handlePage(value) {
                this.pageNum = value;
                this.loadData();
            },
            handlePageSize(value) {
                this.pageSize = value;
                this.loadData();
            },
        },
        destroyed() {
        },
    };


</script>

